<template>
  <div class="equipment_manage">
    <!--    header-->
    <el-card class="equipment_manage_header mb-2">
      加速预处理平台/多类型载荷存储与激励平台
    </el-card>
    <!--    body-->
    <div class="equipment_manage_main mb-2">
      <div class="equipment_manage_ctrl">
        <el-card class="equipment_manage_ctrl_switch">
          <div class="card_title">记录控制</div>
          <!--          switch开关组-->
          <div class="flex justify-between">
            <div class="equipment_manage_ctrl_row">
              <div class="equipment_manage_ctrl_row_cell">
                <div class="equipment_manage_ctrl_row_title">1通道:</div>
                <div class="equipment_manage_ctrl_row_switch">
                  <el-switch
                    v-model="equipmentCtrl.pass1"
                    active-text="打开"
                    inactive-text="关闭"
                  />
                </div>
              </div>
              <div class="equipment_manage_ctrl_row_cell">
                <div class="equipment_manage_ctrl_row_title">2通道:</div>
                <div class="equipment_manage_ctrl_row_switch">
                  <el-switch
                    v-model="equipmentCtrl.pass2"
                    active-text="打开"
                    inactive-text="关闭"
                  />
                </div>
              </div>
            </div>
          </div>
          <el-divider />
          <div class="equipment_manage_ctrl_row">
            <div class="equipment_manage_ctrl_row_cell">
              <div class="equipment_manage_ctrl_row_title">记录文件大小:</div>
              <div class="equipment_manage_ctrl_row_switch">
                <el-switch
                  v-model="equipmentCtrl.size"
                  active-text="多"
                  inactive-text="半"
                />
              </div>
            </div>
          </div>
          <el-divider />
          <div class="equipment_manage_ctrl_row">
            <div class="equipment_manage_ctrl_row_cell">
              <div class="equipment_manage_ctrl_row_title">采集器控制:</div>
              <div class="equipment_manage_ctrl_row_switch">
                <el-switch
                  v-model="equipmentCtrl.collector"
                  active-text="打开"
                  inactive-text="关闭"
                  @change="handleCollectorSwitch"
                />
              </div>
            </div>
            <div
              v-if="equipmentCtrl.collectorShow"
              class="equipment_manage_ctrl_row_cell"
            >
              <div class="equipment_manage_ctrl_row_number">
                <div class="equipment_manage_electronicNumber">
                  {{ equipmentCtrl.collectorText }}
                </div>
                <div
                  v-show="equipmentCtrl.collector"
                  class="equipment_manage_electronicText"
                >
                  <el-icon class="is-loading">
                    <Loading />
                  </el-icon>
                  <span class="ml-2">采集中...</span>
                </div>

                <div
                  v-show="!equipmentCtrl.collector"
                  class="equipment_manage_electronicText"
                >
                  <span class="ml-2">停止采集</span>
                </div>
              </div>
            </div>
            <div v-else class="equipment_manage_ctrl_row_cell">
              <el-result icon="warning" title="数据缺失" />
            </div>
          </div>
        </el-card>
        <el-card class="equipment_manage_ctrl_button">
          <div class="card_title">按钮组</div>
          <div class="equipment_manage_group">
            <el-button size="large" type="primary">格式化</el-button>
            <el-button size="large" type="primary">校时</el-button>
            <el-button size="large" type="primary">记录模块检验修复</el-button>
            <el-button size="large" type="primary">文件对比</el-button>
            <el-button size="large" type="primary">日志分析</el-button>
            <el-button size="large" type="primary">软件升级</el-button>
          </div>
        </el-card>
      </div>
      <el-card class="equipment_manage_info h-full">
        <!--        <el-card>-->
        <div class="equipment_manage_info_chart">
          <div id="equipment_manage_info_pie" />
          <div class="equipment_manage_info_state">
            <div class="equipment_manage_info_icon">关闭</div>
          </div>
        </div>
        <el-divider />
        <div class="equipment_manage_info_list">
          <div class="card_title">自检状态</div>
          <div class="equipment_manage_info_row">
            <div class="equipment_manage_info_row_title">D2000处理节点:</div>
            <div class="equipment_manage_info_row_value">
              {{ selfCheck.D2000 }}
            </div>
          </div>
          <div class="equipment_manage_info_row">
            <div class="equipment_manage_info_row_title">FTGA转摸节点:</div>
            <div class="equipment_manage_info_row_value">
              {{ selfCheck.FTGA }}
            </div>
          </div>
          <div class="equipment_manage_info_row">
            <div class="equipment_manage_info_row_title">智能处理节点:</div>
            <div class="equipment_manage_info_row_value">
              {{ selfCheck.compression }}
            </div>
          </div>
          <div class="equipment_manage_info_row">
            <div class="equipment_manage_info_row_title">视线压缩:</div>
            <div class="equipment_manage_info_row_value">
              {{ selfCheck.intelligent }}
            </div>
          </div>
          <div class="equipment_manage_info_row">
            <div class="equipment_manage_info_row_title">存储盘节点:</div>
            <div class="equipment_manage_info_row_value">
              {{ selfCheck.diskL }}
            </div>
          </div>
          <div class="equipment_manage_info_row">
            <div class="equipment_manage_info_row_title">2.5G网卡:</div>
            <div class="equipment_manage_info_row_value">
              {{ selfCheck.towPointFive }}
            </div>
          </div>
          <div class="equipment_manage_info_row">
            <div class="equipment_manage_info_row_title">4.0G网卡:</div>
            <div class="equipment_manage_info_row_value">
              {{ selfCheck.forG }}
            </div>
          </div>
        </div>
        <!--        </el-card>-->
      </el-card>
    </div>
    <!--    footer-->
    <el-card>
      <div class="equipment_manage_footer">
        <div class="equipment_manage_footer_cell">
          <div class="equipment_manage_footer_cell_title">公司名称:</div>
          <div class="equipment_manage_footer_cell_value">
            {{ footerInfo.companyName }}
          </div>
        </div>
        <div class="equipment_manage_footer_cell">
          <div class="equipment_manage_footer_cell_title">软件版本:</div>
          <div class="equipment_manage_footer_cell_value">
            {{ footerInfo.softBete }}
          </div>
        </div>
        <div class="equipment_manage_footer_cell">
          <div class="equipment_manage_footer_cell_title">时间:</div>
          <div class="equipment_manage_footer_cell_value">
            {{ footerInfo.nowTime }}
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { computed, onMounted, onUnmounted, reactive } from "vue";
import moment from "moment";
import * as echarts from "echarts";
import { chartOption } from "./chartOption";

const selfCheck = reactive({
  D2000: "xxxx",
  FTGA: "xxxx",
  intelligent: "xxx",
  compression: "xxxx",
  diskL: "xxx",
  towPointFive: "xxx",
  forG: "xxxx"
});

const footerInfo = reactive({
  companyName: "xxxxx公司",
  softBete: "v1.0.0",
  nowTime: "2024-9-20 09:16:26"
});

const equipmentCtrl = reactive({
  pass1: true,
  pass2: true,
  size: true,
  collector: false,
  collectorShow: false,
  collectorMoment: moment({
    h: 0,
    m: 0,
    s: 0
  }),
  collectorText: moment({
    h: 0,
    m: 0,
    s: 0
  }).format("HH:mm:ss")
});

let equipmentChart;
let collectorInterval;

//数据采集开关
function handleCollectorSwitch(value) {
  console.log(value);
  if (value) {
    equipmentCtrl.collectorShow = true;
    setCollectorTime();
  } else {
    clearInterval(collectorInterval);
  }
}
//数据采集计时器
function setCollectorTime() {
  equipmentCtrl.collectorMoment = moment({
    h: 0,
    m: 0,
    s: 0
  });
  equipmentCtrl.collectorText =
    equipmentCtrl.collectorMoment.format("HH:mm:ss");
  collectorInterval = setInterval(() => {
    equipmentCtrl.collectorMoment.add(1, "seconds");
    let hours = equipmentCtrl.collectorMoment.hours();
    let minutes = equipmentCtrl.collectorMoment.minutes();
    let seconds = equipmentCtrl.collectorMoment.seconds();
    equipmentCtrl.collectorText = moment({
      h: hours,
      m: minutes,
      s: seconds
    }).format("HH:mm:ss");
  }, 1000);
}

//图形初始化
function equipmentInfoChart() {
  const dom = document.getElementById("equipment_manage_info_pie");
  if (!dom) return;
  equipmentChart = echarts.init(dom);
  equipmentChart.setOption(chartOption);
}

onMounted(() => {
  equipmentInfoChart();
});
onUnmounted(() => {
  clearInterval(collectorInterval);
  equipmentCtrl.collectorShow = false;
});
</script>

<style scoped lang="scss">
.equipment_manage {
  height: calc(100% - 48px);
  .equipment_manage_header {
    width: 100%;
    text-align: center;
    font-size: 24px;
  }
  .equipment_manage_main {
    display: flex;
    height: calc(100% - 96px);
    gap: 8px;
    .equipment_manage_ctrl {
      flex: 5;
      .equipment_manage_ctrl_switch {
        height: calc(50% - 4px);
        margin-bottom: 8px;
        .equipment_manage_ctrl_row {
          width: 100%;
          height: 56px;
          line-height: 56px;
          display: flex;
          .equipment_manage_ctrl_row_cell {
            display: flex;
            justify-content: space-around;
            width: 50%;
            .equipment_manage_ctrl_row_title {
              min-width: 120px;
            }
            .equipment_manage_ctrl_row_switch {
              min-width: 240px;
            }
            .equipment_manage_ctrl_row_number {
              min-width: 240px;
              .equipment_manage_electronicNumber {
                font-size: 48px;
                color: var(--el-color-primary);
                font-family: "electronicScreen";
                font-weight: bold;
              }
              .equipment_manage_electronicText {
                line-height: 16px;
                height: 16px;
              }
            }
          }
        }
      }
      .equipment_manage_ctrl_button {
        height: calc(50% - 4px);
        .equipment_manage_group {
          display: flex;
          flex-flow: row wrap;
          justify-content: center;
          .el-button {
            width: 28%;
            height: 64px;
            margin: 24px;
          }
        }
      }
    }
    .equipment_manage_info {
      flex: 3;
      .equipment_manage_info_chart {
        height: 360px;
        display: flex;
        #equipment_manage_info_pie {
          height: 100%;
          width: 50%;
        }
        .equipment_manage_info_state {
          width: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          .equipment_manage_info_icon {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: red;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
      .equipment_manage_info_list {
        height: calc(100% - 400px);
        .equipment_manage_info_row {
          display: flex;
          padding: 8px 12px;
          margin-bottom: 12px;
        }
      }
    }
  }
  .equipment_manage_footer {
    display: flex;
    //height: 32px;
    justify-content: right;
    .equipment_manage_footer_cell {
      display: flex;
      .equipment_manage_footer_cell_title {
        min-width: 120px;
      }
      .equipment_manage_footer_cell_value {
        min-width: 120px;
      }
    }
  }
}
</style>
